/**
 * Created by mac on 2017/7/7.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    FlatList,
    TouchableOpacity
} from 'react-native';

import {CachedImage} from "react-native-img-cache";

let width = Dimensions.get('window').width;


let data = require('./data.json').data.recommendChannel;
let articlesData = data.articles;

import SectionBar from './SectionBar';

export default class Articles extends Component{

    render(){
        return (
            <View>
                <SectionBar title={data.titles.articles} view={<TouchableOpacity style={{position:'absolute',right:5}}><Text style={{fontSize:12, height:30,lineHeight:30,}}>更多 ></Text></TouchableOpacity>}/>
                <FlatList
                    data={articlesData}
                    renderItem={({item}) => {
                        return (
                                <View>
                                    <CachedImage style={{width:width,height:width/20*13}} source={{uri:item.pic}}/>
                                    <View style={{paddingLeft:5,paddingTop:5}}>
                                        <Text style={{fontSize:15,}}>{item.title}</Text>
                                        <Text numberOfLines={2} style={{paddingTop:5,fontSize:12,paddingRight:5,color:'gray'}}>{item.content}</Text>
                                        <Text style={{position:'absolute',top:5,right:5,fontSize:12,color:'gray'}}>{'阅读数:'+item.viewCount}</Text>
                                    </View>
                                </View>
                            )

                    }}
                />
            </View>
        )
    }
}